<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" top="0" width="640px">
		<el-form ref="form" size="medium" :model="chapterForm" :rules="chapterRules" label-width="54px" class="chapter_form_wrapper">
			<el-form-item label="名称" prop="name">
				<el-input v-model="chapterForm.name" placeholder="请输入章节名称"></el-input>
				<p class="tips" v-if="!isEdit">
					<i class="el-icon-warning"></i>
					批量添加章（节）时，输入一个名称以“，”分隔，可以加入多个。
				</p>
			</el-form-item>
			<el-form-item label="排序" prop="orderBy">
				<el-input-number v-model="chapterForm.orderBy" controls-position="right" :min="1" :max="999"></el-input-number>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitData()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { chapterDetail, addedChapter, updateChapter } from '@/api/course/sysCourseChapter';
export default {
	props: {
		value: { type: Boolean, default: false },
		isSub: { type: Boolean, default: false },
		dataId: { type: String, default: '' },
		type: { type: String, default: '' }
	},
	data() {
		return {
			visible: this.value,
			chapterNames: [],
			chapterForm: {},
			chapterRules: {
				name: [{ required: true, message: '请输入章节名称', trigger: 'blur' }]
			},
			selectConfig: {
				multiple: true,
				filterable: true,
				allowCreate: true,
				style: { width: '100%' },
				defaultFirstOption: true,
				placeholder: '输入章节名称'
			}
		};
	},
	computed: {
		courseId() {
			return this.$route.params.id;
		},
		isEdit() {
			return !!this.dataId && !this.isSub;
		},
		dialogTitle() {
			return `${this.isEdit ? '修改' : '新增'}${!this.isSub ? '章' : '节'}`;
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.$nextTick(async () => {
				this.chapterForm = {};
				this.chapterNames = [];
				if (this.isEdit) {
					await this.getChapterDetail();
				} else if (!this.isSub) {
					this.$set(this.chapterForm, 'pid', '0');
				} else {
					this.$set(this.chapterForm, 'pid', this.dataId);
				}
				this.$refs['form'].clearValidate();
			});
		}
	},
	methods: {
		//获取章节详情
		async getChapterDetail() {
			let result = await chapterDetail(this.dataId).then((res) => res.data);
			if (result.code === '0') {
				this.chapterForm = this.$detailData(result.data);
			}
		},

		//提交数据
		handleSubmitData() {
			this.$refs['form'].validate(async (valid) => {
				if (!valid) return false;
				this.submitChapterRequest();
			});
		},

		//提交参数
		returnSubmitParams() {
			let params = { ...this.chapterForm };
			if (!this.isEdit) {
				params['type'] = this.type;
				params['courseId'] = this.courseId;
			}
			return params;
		},

		//新增修改章节
		async submitChapterRequest() {
			let params = this.returnSubmitParams();
			let callFunc = eval(this.isEdit ? updateChapter : addedChapter);
			let result = await callFunc(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success(`${this.isEdit ? '修改' : '新增'}章节`);
				this.$emit('refresh');
				this.visible = false;
			}
		}
	}
};
</script>
<style lang="scss">
.el-select-dropdown {
	display: none;
}
</style>
<style lang="scss" scoped>
.chapter_form_wrapper::v-deep {
	flex: 1;
	overflow: hidden;
	padding: 10px 10px 0;
	.el-input__suffix {
		display: none;
	}
	p.tips {
		color: #909399;
	}
}
</style>
